<template>
  <div class="detail-box" style="width: 80%">
    <el-row>
      <el-col :span="15">
        <report-detail-table :report="report"></report-detail-table>
      </el-col>
      <report-comment-area :evaluation-data="evaluationData" mode="worker">
        <template #submit-comment-area>
          <send-comment-area @submit-comment="handleSubmitComment"></send-comment-area>
        </template>
      </report-comment-area>
    </el-row>
  </div>

</template>

<script>
import ReportDetailTable from "@/components/new/report-detail-table/ReportDetailTable";
import ReportCommentArea from "@/components/new/report-comment/report-comment-area/ReportCommentArea";
import SendCommentArea from "@/components/new/report-comment/send-comment-area/SendCommentArea";
import {
  getCollaborationTaskReport,
  getReportEvaluationByReportID,
  getScreenshot, postNewComment
} from "@/api/report";
import {Debounce} from "@/utils/Debounce";
export default {
  name: "CollaborationTaskReportDetail",
  components: {SendCommentArea, ReportCommentArea, ReportDetailTable},
  data(){
    return {
      report: {        id: -1,
        taskname: '',
        type: '',
        environment: '',
        description: '',
        steps: '',
        screenshot: 'https://lluviasnowb01.oss-cn-hangzhou.aliyuncs.com/collect/'},
      baseUrl: 'https://lluviasnowb01.oss-cn-hangzhou.aliyuncs.com/collect/',
      evaluationData: undefined,
      myComment: {
        id: -1,
        userId: parseInt(sessionStorage.getItem('userid')),
        username: sessionStorage.getItem('username'),
        score: 0,
        description: ""
      },
    }
  },
  methods: {
    handleSubmitComment(comment){
      this.myComment = {...this.myComment, ...comment};
      this.submitComment();
    },
    submitComment: Debounce(function () {
      if (this.myComment.score === 0) {
        this.$message.error('您尚未对报告进行评分！');
        return;
      }
      if (this.myComment.description === '') {
        this.$message.error('您尚未对报告进行评论！');
        return;
      }
      this.handlePostComment();
    }, 1000),
    async handlePostComment() {
      const res = await postNewComment({
        reportid: this.report.id,  // int
        userid: this.myComment.userId,      // int
        //username: this.myComment.username,  // string
        vote: this.myComment.score,          // float
        comment: this.myComment.description     // string
      });
      if (res.code === 200) {
        this.$message.success("评价成功！");
        setTimeout("location.reload()", 1000);
        location.reload();
      } else {
        this.$message.error(res.msg);
      }
    },
    async getReport() {
      const reportid = this.$route.query.reportid;
      const res = await getCollaborationTaskReport(reportid);
      if (res.code !== 200) {
        throw new Error(res.msg);
      }

      const obj = res.data;
      const reportId = obj.id;

      // this.form["screenshot"]=this.baseUrl
      for (let key of Object.keys(obj)) {
        if(key==='id')
          sessionStorage.setItem('report_boss_evaluate_id',obj['id']);
        if (key === 'type') {
          if (obj['type'] === 'function_test') this.report['type'] = '功能测试';
          else if (obj['type'] === 'performance_test') this.report['type'] = '性能测试';
          else if (obj['type'] === 'bug_explore') this.report['type'] = 'Bug探索';
        } else {
          this.report[key] = obj[key];
        }
      }
      const res2 = await getScreenshot(reportId);
      this.report["screenshot"] = this.baseUrl + res2[0].url

    },
    async getEvaluationForm() {
      this.evaluationData = await getReportEvaluationByReportID(this.$route.query.reportid, sessionStorage.getItem('userid'));
    },

  },
  mounted() {
    Promise.all([this.getReport(), this.getEvaluationForm()]).catch(
        e => {
          this.$message.error(e.message)
        }
    )
  }
}
</script>

<style scoped>

</style>
